<template>
    <div>
        <div v-bind:class="{ zhezhaoshow: isActive,zhezhao1_choose:isNormal }">
            <div v-bind:class="{ sureshow: isActive,suredel:isNormal }">
                <h6>提示</h6>
                <p>{{Data.des}}</p>
                <div class="flexplay">
                    <div id="delete" @click="parentCancel">{{Data.cancel}}</div>
                    <div id="sure" @click="parentFun">{{Data.sure}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: `popup`,
    data() {
      return {
        isActive: false,
        isNormal: true,
        Data: this.pupData
      };
    },
    props: {
      pupData: {
        type: Object,
        required: true
      }
    },
    methods: {
      parentFun: function () {
        this.$emit('sureFun');
      },
      parentCancel: function () {
        this.$emit('cancelFun');
      },
      switchState: function () {
        this.isActive = !this.isActive;
      }
    }
  }
  ;
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../../assets/stylus/main.styl"
    .suredel {
        background-color: #fff;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        position: absolute;
        /*top: -30%;*/
        width: 80%;
        padding-bottom: 30px;
        border-radius(10px);
        display: none
    }

    .sureshow {
        display: block
    }

    .suredel h6 {
        margin-top: 35px;
        word(16px, #000)
    }

    .suredel p {
        margin: 15px;
        word(13px, '');
    }

    #delete {
        border(#b8b8b8, 1px);
        font-size: word14;
        padding: vw(8) vw(25);
        color: #666;
        border-radius: 15px;
        box-sizing border-box
    }

    #sure {
        background-color: main-color;
        font-size: word14;
        padding: vw(10) vw(27);
        color: #fff;
        border-radius: 15px;
    }

    .zhezhao1_choose {
        position: fixed;
        /*top: -40%;*/
        right: 0;
        left: 0;
        background: rgba(40, 22, 61, 0);
        transition: all 0.5s;
        z-index: 99993;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .zhezhaoshow {
        background: rgba(0, 0, 0, .5);
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        top: 0;
        bottom: 0;
    }

    .flexplay {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 15%
    }
</style>
